<template>
    <div>
        <!-- 头部 -->
        <headerView class="header">
            <template v-slot:center>
                <span class="title">4/<span class="smell">4 </span>资质信息</span>
            </template>
        </headerView>
        <div class="content">
            <!-- 营业执照 -->
            <div class="name-and-tel">
                <div class="form-box">
                    <div class="lab">
                        <span>证件名称</span>
                        <span>营业执照</span>
                    </div>
                    <div class="lab">
                        <span>证件编号</span>
                        <input type="text" placeholder="请输入证件编号/注册号" v-model="licenseNum">
                    </div>
                    <!-- 有效期选择 -->
                    <div class="lab">
                        <span>有效期</span>
                        <input type="text" placeholder="请选择证件有效期" @click="showTime = true" v-model="termValidity1">
                    </div>

                    <!-- 有效期选择 -->
                    <van-popup v-model="showTime" round position="bottom" :style="{ height: '30%' }">
                        <van-datetime-picker v-model="currentDate" type="date" title="营业执照有效期"
                            :columns-order="['year', 'month', 'day']" :formatter="formatter" @confirm="timeOk1"
                            @cancel="showTime = false" :min-date="minDate" :max-date="maxDate" />
                    </van-popup>

                    <!-- 上传营业执照 -->
                    <div class="upload_pictures_box">
                        <div class="shopOutside">
                            <van-uploader v-model="licensePhoto" multiple max-count="1" upload-text="点击上传"
                                preview-size="200px" />
                            <p>证件正面图</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 经营许可证 -->
            <div class="name-and-tel">
                <div class="form-box">
                    <div class="lab">
                        <span>证件名称</span>
                        <span>经营许可证</span>
                    </div>
                    <div class="lab">
                        <span>证件编号</span>
                        <input type="text" placeholder="请输入证件编号/注册号" v-model="businessCertificate">
                    </div>
                    <!-- 有效期选择 -->
                    <div class="lab">
                        <span>有效期</span>
                        <input type="text" placeholder="请选择证件有效期" @click="showTime1 = true" v-model="termValidity">
                    </div>
                    <van-popup v-model="showTime1" round position="bottom" :style="{ height: '30%' }">
                        <van-datetime-picker v-model="currentDate" type="date" title="身份证有效期选择"
                            :columns-order="['year', 'month', 'day']" :formatter="formatter" @confirm="timeOk"
                            @cancel="showTime1 = false" 
                            :min-date="minDate" 
                            :max-date="maxDate" />
                    </van-popup>

                    <!-- 上传营业执照 -->
                    <div class="upload_pictures_box">
                        <div class="shopOutside">
                            <van-uploader v-model="businessPhoto" multiple max-count="1" upload-text="点击上传"
                                preview-size="200px" />
                            <p>证件正面图</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 下一步按钮 -->
            <div class="btn_box">
                <van-button round class="btn_next" :disabled="checkedState" @click="goNext">提交审核</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import headerView from "../../components/headerView.vue";
// import { shopInformation } from "../../https/shopApi";
import { mapMutations } from "vuex";
import { Toast } from 'vant';
export default {
    components: { headerView },
    data() {
        return {
            licenseNum: "", //执照编号
            termValidity1: "",// 执照有效期
            licensePhoto: [], //执照照片

            businessCertificate: "", //经营许可证编号
            businessPhoto: [], //经营许可证照片
            termValidity: "", // /经营许可证有效期

            checkedState: false,
            currentDate: new Date(),
            minDate: new Date(),
            maxDate: new Date(2100, 10, 1),
            showTime: false,
            showTime1: false,
        }
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        ...mapMutations(['shop/setQualificationInformation']),
        ...mapMutations(['shop/getTime']),
        goNext() {
            // console.log('时间：',this.getTIme());
            this['shop/getTime'](this.getTIme())
            let qualificationInformation = {
                licenseNum: this.licenseNum, //执照编号
                termValidity1: this.termValidity1,// 执照有效期
                licensePhoto: this.licensePhoto, //执照照片
                businessCertificate: this.businessCertificate, //经营许可证编号
                businessPhoto: this.businessPhoto, //经营许可证照片
                termValidity: this.termValidity, // /经营许可证有效期
            }
            this['shop/setQualificationInformation'](qualificationInformation)
            // this.$store.state.shop.data
            // shopInformation(this.$store.state.shop.data)
            //     .then((res) => {
            //         console.log('数据提交成功', res);
            //         Toast.success('提交成功');
            //         this.$router.push('/SubmitSuccess')
            //     }).catch((err) => {
            //         console.log(err);
            //         Toast.fail('提交失败');
            //     })
            this.$router.push('/SubmitSuccess')
            Toast.success('提交成功');
        },

        timeOk(val) {
            var datetime = val.getFullYear() + "年" + (val.getMonth() + 1) + "月" + val.getDate() + "日";
            this.termValidity = datetime
            this.showTime1 = false
        },
        timeOk1(val) {
            var datetime = val.getFullYear() + "年" + (val.getMonth() + 1) + "月" + val.getDate() + "日";
            this.termValidity1 = datetime
            this.showTime = false
        },
        // 时间的选择
        formatter(type, val) {
            if (type === 'year') {
                return val + '年';
            }
            if (type === 'month') {
                return val + '月';
            }
            if (type === 'day') {
                return val + '日';
            }
            return val;
        },
        getTIme() {
            // 1.获取当前时间
            var myDate = new Date();
            // 2.获取时间中的年月日时分秒
            myDate.getYear(); // 获取当前年份(2位)
            myDate.getFullYear(); // 获取完整的年份(4位,1970-????)
            myDate.getMonth(); // 获取当前月份(0-11,0代表1月)
            myDate.getDate(); // 获取当前日(1-31)
            myDate.getDay(); // 获取当前星期X(0-6,0代表星期天)
            myDate.getTime(); // 获取当前时间(从1970.1.1开始的毫秒数)
            myDate.getHours(); // 获取当前小时数(0-23)
            myDate.getMinutes(); // 获取当前分钟数(0-59)
            myDate.getSeconds(); // 获取当前秒数(0-59)
            myDate.getMilliseconds(); // 获取当前毫秒数(0-999)
            myDate.toLocaleDateString(); // 获取当前日期
            myDate.toLocaleTimeString(); // 获取当前时间
            myDate.toLocaleString(); // 获取日期与时间
            Date.prototype.Format = function (fmt) { // author: meizz
                var o = {
                    "M+": this.getMonth() + 1, // 月份
                    "d+": this.getDate(), // 日
                    "h+": this.getHours(), // 小时
                    "m+": this.getMinutes(), // 分
                    "s+": this.getSeconds(), // 秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
                    "S": this.getMilliseconds() // 毫秒
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }
            // var time1 = new Date().Format("yyyy-MM-dd");
            var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss");
            return time2
        }
    }
}
</script>

<style scoped>
input {
    text-indent: 10px;
}

/* 头部 */
.header {
    position: fixed;
    top: 0;
    z-index: 99;
}

.smell {
    font-size: 15px;
    color: rgb(187, 186, 186);
}

.title {
    margin: 0 auto;
}


/* 具体内容部分 */
.content {
    padding-top: 10%;
    width: 100%;
    margin: 0 auto;
    background-color: #f7f7f7;
}

.form-box {
    width: 90%;
    margin: 0 auto;
    padding: 4px 0;
}

.name-and-tel {
    margin: 16px 0;
    width: 100%;
    background-color: #ffff;
}

.lab {
    display: flex;
    align-items: center;
    margin: 10px 0;
    position: relative;
}

.lab span {
    font-size: 14px;
    width: 90px;
    margin-left: 15px;
    color: #646566;
}

.lab input {
    width: 70%;
    border: none;
    background-color: #eae7e7;
    border-radius: 10px;
    padding: 10px 0;
    font-size: 15px;
}

input::placeholder {
    font-size: 14px;
    text-align: left;
    line-height: normal;
    color: #989595;
}

/* 上传图片 */
.upload_pictures_box {
    width: 100%;
    background-color: #ffff;
    text-align: center;
    padding-bottom: 10px;
}

.shopOutside {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
    /* background-color:pink; */
}

.shopOutside p {
    font-size: 13px;
}

/* 下一步按钮 */
.btn_box {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    bottom: 0;
    z-index: 99;
}

.btn_next {
    width: 100%;
    background-color: #ff6e53;
    text-align: center;
    color: #ffff;
    font-size: 16px;
    margin: 12px 0;
}
</style>